<style>
.el-dialog{border-radius: 10px;}
.el-dialog__body{padding: 0; ;}
</style>
<template>
  <div class="app-container">
    <div style="margin-bottom: 10px;">
      <el-input v-model="pageParam.keywords" style="width:300px;" placeholder="请输入：订单号" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
      </el-input>
      <template>

        <el-button style="margin-left: 10px;" type="primary" @click="drawerVisible=true"> <i class="el-icon-upload" /> 上传数据</el-button>
      </template>
    </div>
    <el-card class="box-card">
      <el-table
        size="mini"
        :data="tableData"
        height="calc(100vh - 230px)"
        style="width: 100%"
      >
        <el-table-column
          label="操作"
          width="140"
        >
          <template slot-scope="{row}">
            <el-dropdown split-button size="mini" type="primary" @command="(command)=>{handleCommand(command, row)}">
              <el-tooltip class="item" effect="dark" content="上传订单明细" placement="top">
                <i class="el-icon-upload" @click="OrderItem(row)" />
              </el-tooltip>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="xinjiapo" icon="el-icon-view"> 新加坡</el-dropdown-item>
                <el-dropdown-item command="europe" icon="el-icon-view"> 欧洲</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>

        <el-table-column label="订单号/唯一参考号" width="240">
          <template slot-scope="{row}">
            <el-tag effect="dark" size="mini" type="success">订单：{{ row.order_sn }}</el-tag>
            <el-tag size="mini" type="info">唯一：{{ row.unique_ref }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="货值/消费税" width="135">
          <template slot-scope="{row}">
            <el-tag size="mini" type="info">货值：{{ row.gds_amt }}</el-tag>
            <el-tag size="mini">税费：{{ row.gst_amt }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="毛重/外包装" width="150">
          <template slot-scope="{row}">
            <el-tag size="mini" type="info">毛重：{{ row.gross_wt_unit }}</el-tag>
            <el-tag size="mini">包装：{{ row.outer_pack_unit }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="到达/有效期" width="120">
          <template slot-scope="{row}">
            <el-tag size="mini" type="info">到达：{{ row.arrival_date }}</el-tag>
            <el-tag size="mini" type="danger">有效：{{ row.validity_period }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="收件人" prop="importer" min-width="400" />
      </el-table>
      <el-pagination
        style="margin-top:10px;"
        :small="true"
        :current-page="pageParam.currentPage"
        :page-sizes="[10, 50, 100]"
        :page-size="pageParam.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="pageParam.orderTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog title="文件预览" fullscreen :visible.sync="dialogTableVisible">
      <embed :src="src" style="padding:0px;overflow-x:scroll; height:calc(100vh - 80px);" width="100%" height="100%">
    </el-dialog>

    <el-drawer
      title="上传数据"
      :visible.sync="drawerVisible"
      direction="rtl"
      :before-close="handleDrawerClose"
      :wrapper-closable="true"
    >
      <div style="margin:15px 0 15px 30px;">
        <el-upload
          class="upload-demo"
          drag
          :headers="headers"
          :action="orderUploadUrl"
          :on-success="handleOrderUpload"
          multiple
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">
            只能上传xlsx表格文件，且不超过500kb
            <ul style="line-height:20px;padding-left:0px;">
              <el-link :href="handleDownfile('新加坡-订单数据模板.xlsx')" target="_blank" type="primary">新加坡-订单数据模板</el-link><br>
              <el-link :href="handleDownfile('欧洲-订单数据模板.xlsx')" target="_blank" type="primary">欧洲-订单数据模板</el-link><br>
            </ul>
          </div>

        </el-upload>
      </div>

    </el-drawer>

    <el-drawer
      title="上传明细数据"
      :visible.sync="drawerItemVisible"
      direction="rtl"
      :before-close="handleItemDrawerClose"
      :wrapper-closable="true"
    >
      <div style="margin:15px 0 15px 30px;">
        <el-upload
          class="upload-demo"
          drag
          :headers="headers"
          :data="orderItemRow"
          :action="orderItemUploadUrl"
          :on-success="handleOrderUpload"
          multiple
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传xlsx表格文件，且不超过500kb  <el-link :href="handleDownfile('欧洲-订单明细模板.xlsx')" target="_blank" type="primary">模板下载</el-link></div>

        </el-upload>
      </div>

    </el-drawer>
  </div>

</template>
<style>
.app_img_icon::before{font-size: 100px;}
</style>
<script>

// import pdf from 'vue-pdf'
import request from '@/utils/request'
// import { handleList, handlePdf } from '@/api/pdf'
export default {
  data() {
    return {
      headers: {
        Authorization: request.getToken
      },
      tableData: [{}],
      pageParam: {
        keywords: '',
        currentPage: 1,
        pageSize: 10,
        orderTotal: 0
      },

      drawerVisible: false,
      drawerItemVisible: false,
      dialogTableVisible: false,
      orderUploadUrl: request.baseURL + '/pdf.order/import.html',
      orderItemUploadUrl: request.baseURL + '/pdf.item/import.html',
      orderItemRow: {},
      src: ''
    }
  },
  created() {
    this.handleList(this.pageParam)
  },
  methods: {
    handleDownfile(name) {
      return request.baseURL + '/../data/template/' + name
    },
    OrderItem(row) {
      this.drawerItemVisible = true
      this.orderItemRow = row
    },
    handleDrawerClose() {
      this.drawerVisible = false
    },
    handleItemDrawerClose() {
      this.drawerItemVisible = false
    },
    handleOrderUpload(res) {
      var type = (res.code === 200) ? 'success' : 'info'
      var that = this
      this.$message({
        message: res.msg,
        type: type,
        onClose: function() {
          that.drawerVisible = false
          that.handleList(that.pageParam)
        }
      })
    },
    // 搜索
    handleSearch() {
      this.pageParam.currentPage = 1
      this.handleList(this.pageParam)
    },
    handleCommand(command, row) {
      this.dialogTableVisible = true
      console.log(row)
      // handlePdf(command, row).then(res => {
      //   this.src = this.getObjectURL(res.data)
      // })
    },
    getObjectURL(file) {
      let url = null
      if (window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(file)
      } else if (window.webkitURL !== undefined) { // webkit or chrome
        try {
          url = window.webkitURL.createObjectURL(file)
        } catch (error) {
          console.log(error)
        }
      } else if (window.URL !== undefined) { // mozilla(firefox)
        try {
          url = window.URL.createObjectURL(file)
        } catch (error) {
          console.log(error)
        }
      }
      return url
    },
    handleList(data) {
      // handleList(data).then(res => {
      //   this.tableData = res.data.data
      //   this.pageParam.currentPage = res.data.current_page
      //   this.pageParam.pageSize = res.data.per_page
      //   this.pageParam.orderTotal = res.data.total
      // })
    },
    handleSizeChange(val) {
      // this.pageParam.pageSize = val
      this.handleList(this.pageParam)
    },
    handleCurrentChange(val) {
      this.pageParam.currentPage = val
      this.handleList(this.pageParam)
    }
  }
}
</script>
